<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"  
                xmlns:h="http://java.sun.com/jsf/html">
    <p:blockUI block=":frmAsignarOpciones:panOpciones" widgetVar="blkPanelUsuOpcion" >
        Espere mientras se cargan los datos<br /> 
        <p:graphicImage value="/resource/images/loading.gif" style="width: 65px; height: 50px;"/>
    </p:blockUI>
    <p:blockUI block=":frmAsignarOpciones" widgetVar="blkPanelAsignarOpciones" >
        Espere mientras se procesan los datos<br /> 
        <p:graphicImage value="/resource/images/loading.gif" style="width: 65px; height: 50px;"/>
    </p:blockUI>
    <style type="text/css">
        .ui-chkbox{
            cursor: pointer;
        }
    </style>
    <h:form id="frmAsignarOpciones" onkeypress="if (event.keyCode == 13) return false;">
        <p:panel>
            <table style="width:100%;" >
                <thead>
                    <tr>
                        <td>
                            <div style="width: 750px; overflow: hidden;float: left;">
                                <table cellpadding="5" cellspacing="8" style="width: 630px;">
                                    <tr>
                                        <td style="width: 50px;"><h:outputText value="Usuario :"/> </td>
                                        <td colspan="3">
                                            <p:inputText value="#{usuarioController.bean.txtNombres} #{usuarioController.bean.txtApellidoPaterno} #{usuarioController.bean.txtApellidoMaterno}"
                                                     style="width: 300px;" disabled="true" styleClass="disabled">
                                            </p:inputText>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><h:outputText value="Perfil :"/> </td>
                                        <td>
                                            <p:inputText id="txtNomPerfil" value="#{usuarioController.selectedUsuarioPerfil.nidPerfil.txtPerfil}"
                                                         style="width: 300px;" disabled="true" styleClass="disabled">
                                            </p:inputText>
                                        </td>
                                        <td style="width: 90px;"><h:outputText value="Tipo de Acceso :" /></td>
                                        <td>
                                            <p:inputText value="#{(usuarioController.selectedUsuarioPerfil.flgConsulta=='1')?'Consulta':'NO CONSULTA'}"
                                                         style="width: 100px;" disabled="true" styleClass="disabled">
                                            </p:inputText>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <div style="padding-top: 11px;float: right;">
                                <p:commandButton icon="ui-icon-search" value="Opciones Asignadas" process="@this"
                                                 actionListener="#{usuarioController.visualizaOpciones}"
                                                 update=":dlgVerOpcionesDeUsuario" oncomplete="verOpcionesDeUsuario.show()"/>
                            </div>
                        </td>
                    </tr>
                </thead>  
                <tbody>
                    <tr>
                        <td>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div style="height: 310px;width: 360px; overflow: hidden;float: left;">
                                <p:tree id="docTree" value="#{usuarioController.moduloTree}" var="per" style="width: 350px;height: 306px;overflow:hidden;" 
                                        selectionMode="single" selection="#{usuarioController.selectedModuloNode}" 
                                        dynamic="true" animate="true"> 
                                    <p:ajax event="select" update=":frmAsignarOpciones:panOpcionesTmp" 
                                            oncomplete="blkPanelAsignarOpciones.hide();"
                                            onstart="blkPanelAsignarOpciones.show();" listener="#{usuarioController.onNodeOpcionSelect}" /> 
                                    <p:treeNode expandedIcon="ui-icon-folder-open" 
                                                collapsedIcon="ui-icon-folder-collapsed" >  
                                        <h:outputText value="#{per}" /> 
                                    </p:treeNode>
                                    <p:treeNode type="document" icon="ui-icon-document">
                                        <h:outputText value="#{per}" />  
                                    </p:treeNode>  
                                </p:tree>
                            </div>
                            <div style="height: 310px;width: 550px;float: left;">
                                <p:panel id="panOpciones" style="float: left;width: 570px;height: 300px;">
                                    <h:panelGrid id="panOpcionesTmp" style="width: 100%;">
                                        <div style="height: 280px; overflow-y: auto;overflow-x:hidden;">
                                            <div class="ui-datatable ui-widget">
                                                <table style="">
                                                    <thead>
                                                        <tr>
                                                            <th class="ui-widget-header" style="text-align: center; width: 200px">
                                                                <div class="ui-dt-c" style="width:200px"><span>Opción</span></div>
                                                            </th>
                                                            <th class="ui-widget-header" style="text-align: center; width: 60px">
                                                                <div class="ui-dt-c" style="width:60px"><span>Activo</span></div>
                                                            </th>
                                                            <th class="ui-widget-header" style="text-align: center; width: 60px">
                                                                <div class="ui-dt-c" style="width:60px"><span>Consulta</span></div>
                                                            </th>
                                                            <th class="ui-widget-header" style="text-align: center; width: 80px">
                                                                <div class="ui-dt-c" style="width:80px"><span>Acciones</span></div>
                                                            </th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <ui:repeat var="opcionAut" value="#{usuarioController.listaOpcionesAutorizadas}" >
                                                            <tr class="ui-widget-content ui-datatable-odd" >
                                                                <td style="text-align: center; width: 200px">
                                                                    <div class="ui-dt-c" style="width:200px">
                                                                        <div style="text-align: center;">#{opcionAut.txtOpcion}</div>
                                                                    </div>
                                                                </td>
                                                                <td style="text-align: center; width: 60px">
                                                                    <div class="ui-dt-c">
                                                                        <div style="text-align: center;">
                                                                            <p:selectBooleanCheckbox value="#{opcionAut.bflgActivo}" >
                                                                                <p:ajax update=":frmAsignarOpciones:panOpcionesTmp" listener="#{usuarioController.agregaOpcionParaUsuarioPerfil(opcionAut)}"/>  
                                                                            </p:selectBooleanCheckbox>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                                <td style="text-align: center; width: 60px">
                                                                    <div class="ui-dt-c">
                                                                        <div style="text-align: center;cursor: pointer;">
                                                                            <p:selectBooleanCheckbox value="#{opcionAut.bflgConsulta}"
                                                                                                     disabled="#{(usuarioController.selectedUsuarioPerfil.flgConsulta == '1')?true:(opcionAut.bflgActivo)?false:true}">
                                                                            </p:selectBooleanCheckbox>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                                <td style="text-align: center; width: 80px">
                                                                    <div style="text-align: center;width: 18px;height: 22px;padding-left: 40px;">
                                                                            <p:commandLink actionListener="#{usuarioController.personalizaOpcion(opcionAut)}"
                                                                                update=":dlgAsignarAcciones, :frmGestionarAcciones, :frmAsignarOpciones:msjConfigOpciones"
                                                                                style="width: 18px;height: 18px;" disabled="#{!opcionAut.bflgActivo}">
                                                                                <li style="width: 18px;height: 18px;margin-left: 0px;" 
                                                                                    class="ui-state-default ui-corner-all" title="Personalizar">
                                                                                    <span class="ui-icon ui-icon-unlocked"></span>
                                                                                </li>
                                                                            </p:commandLink>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        </ui:repeat>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </h:panelGrid>
                                </p:panel>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </p:panel>
        <p:toolbar>
            <p:toolbarGroup align="right">
                <p:commandButton icon="ui-icon-disk" value="Grabar" style="margin-left: 20px;margin-right: 40px;" 
                                 actionListener="#{usuarioController.guardarUsuarioPerfilOpciones()}"
                                 update=":frmAsignarOpciones:msjConfigOpciones, :frmAsignarOpciones:panOpcionesTmp"
                                 oncomplete="blkPanelAsignarOpciones.hide()" onstart="blkPanelAsignarOpciones.show()"/>
                <p:commandButton icon="ui-icon-close" value="Cerrar" process="@this" oncomplete="asignaOpcion.hide()"/>
            </p:toolbarGroup>
        </p:toolbar>
        <p:messages id="msjConfigOpciones" showDetail="true" showSummary="false"/>
    </h:form>
</ui:composition>
